<template>
	<view class="user">
		<div class="user_box">
			<div class="user_box_images">
				<div class="user_box_images_do">
					<img class="user_box_images_avat" src="../../static/logo.png" mode=""></img>
				</div>
			</div>
			<div class="user_box_title">
				<div class="e_title">
					
					<div class="vip_box">
						<image class="vip_box_icn" src="../../static/icon/vip_icn.png" mode=""></image>
						<text class="vip_box_text">v1</text>
					</div>
					
					<p class="user_box_name">飞天侠</p>
				</div>
				<div>
					信誉分：80分
				</div>
			</div>
		</div>
		<div class="interest_box">
			<div class="me_bk me_box">
				<p class="me_box_title">vip权益</p>
				<div class="me_box_item" v-for="(item, index) of interest" :key="index">
					<image class="box_item_icn" :src="item.icon" mode=""></image>
					<view>{{item.label}}</view>
				</div>
			</div>
		</div>
		<div class="income_box me_bk">
			<div class="income_box_title me_box_title">资金管理</div>
			<div class="chche_box">
				<div class="chche_box_item">
					<span class="chche_item_label">佣金</span>
					<span class="chche_item_text">999.00</span>
				</div>
				<div class="chche_box_item">
					<span class="chche_item_label">佣金</span>
					<span class="chche_item_text">999.00</span>
				</div>
				<div class="chche_box_item">
					<span class="chche_item_label">佣金</span>
					<span class="chche_item_text">999.00</span>
				</div>
				<div class="chche_box_item">
					<span class="chche_item_label">佣金</span>
					<span class="chche_item_text">999.00</span>
				</div>
			</div>
			<div>
				<l-echart ref="ringChart"></l-echart>
			</div>
			<div class="datePicks">
				<yu-calendar 
					v-if="priceListLoading"
				    :priceList="priceList" 
				    bgColor="#3570cc" 
				    color="#fff" 
				    @click="onClick">
				    </yu-calendar>
			</div>
			<div class="income_box_total">累计收益率：{{revence}}%</div>
		</div>
	</view>
</template>

<script>
	import yuCalendar from "@/components/yu-calendar/yu-calendar.vue"
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min.js';
	import userApi from '@/api/stockApi/user.js'
	export default {
		components:{
			yuCalendar
		},
		data() {
			return {
				show:true,
				interest:[
					{
						label:"测试",
						icon:'../../static/tabbar/vip_icn_active.png',
						url:"",
					},
					{
						label:"测试",
						icon:'../../static/tabbar/vip_icn_active.png',
						url:"",
					},
					{
						label:"测试",
						icon:'../../static/tabbar/vip_icn_active.png',
						url:"",
					},
				],
				priceList:[],
				priceListLoading:false,
				revence:0.00
			}
		},
		created(){
			this.getStockDayData();
			this.getTotalProfitRate();
			this.$nextTick(()=>{
				this.loadRingData()
			})
		},
		methods: {
			async getTotalProfitRate(){
				
					const {data} = await userApi.getTotalProfitRate();
					
					this.revence = data.data;
					console.log(data,'vvvavavav')
			},
			async getStockDayData(){
				const {data} = await userApi.getStockProfitData();
				let list = [];
				data && data.data && data.data.forEach(item => {
					item = {
						...item,
						"date": item.billDate,
						"price": item.profitRate,
						isRed:(Number(item.profitRate) > 0? true:false)
					}
					list.push(item)
				})
				console.log(list)
				this.priceList = list;
				this.priceListLoading = true;
			},
			loadRingData() {
				//这里请求服务器拿到数据
				let res = {
					//x轴数据
					xData: ['6/11', '6/12', '6/13', '6/14', '6/15', '6/16', '6/17'],
					//y轴数据
					yData: [50, 120, 150, 220, 180, 300, 130],
				}
				//这里option配置参考文档：https://echarts.apache.org/zh/option.html
				let option = {
					xAxis: {
						type: 'category',
						// x轴数据文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// x轴那天坐标轴线的颜色
						axisLine: {
							lineStyle: {
								color: '#f1f1f1',
							}
						},
						//x轴上面刻度线隐藏
						axisTick: {
							show: false,
						},
						//这里是x轴数据
						data: res.xData
					},
					//设置网格
					grid: {
						top: 40,
						bottom: 30,
					},
					//y轴设置
					yAxis: {
						type: 'value',
						//y轴标签文字颜色
						axisLabel: {
							color: '#a7a7a7'
						},
						// y轴分割线设置为虚线
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed'
							}
						}
					},
					//设置提示为点击时
					tooltip: {
						trigger: 'axis',
						triggerOn: 'click',
						formatter: '{b} \n 数据: {c}'
					},
					//设置曲线的颜色
					color: ['#4e9d77'],
					series: [{
						//这里是数据
						data: res.yData,
						type: 'line',
						//设置为平滑，默认为折线
						smooth: true,
					}]
				};
				
				this.$refs.ringChart.init(echarts, chart => {
					chart.setOption(option);
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
@import "../../styles/index/user.scss";
</style>
